<!DOCTYPE html>
<html lang="en" style="font-size: 75px;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿里双11</title>
    <script>
        // 阻塞 来动态设置 html font-size
        // 立即执行函数
        (function () {
            // console.log('立即执行函数')
            function calc() {
                const w = document.documentElement.clientWidth
                document.documentElement.style.fontSize = 75 * (w / 750) + 'px'
            }
            calc()
            window.onresize = function () {
                calc()
            }
        })()
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div>
        <!-- <div style="width: 5rem;height: 2rem;background-color: red;"></div> -->
        <!-- <div style="width: 5rem;height: 2rem;background-color: blue;"></div> -->
        <div style="width: 5rem;height: 2rem;background-color: green;display: inline-block;"></div>
        <div style="width: 5rem;height: 2rem;background-color: blue;display: inline-block;"></div>
        <div style="font-size: 0;">
            <!-- 格式化上下文， -->
            <div style="width: 5rem;height: 2rem;background-color: green;display: inline-block;
            font-size: 20px;color: white;vertical-align: top;">111</div>
            <div style="width: 5rem;height: 2rem;background-color: blue;display: inline-block;
            vertical-align: top;">222</div>
        </div>
    </div>
</body>

</html>